﻿<!--@Knockout-->
<div style="height:200px;max-width:200px;margin:0px auto">	
    <div id="password1" data-bind="dxTextBox: { value: password, mode: 'password', placeholder: 'Password' },
        dxValidator: {  validationRules: [{ type: 'required', message: 'Password can not be empty.' }] }">
    </div>
    <div id="password2" data-bind="dxTextBox: { value: confirmedPassword, mode: 'password', placeholder: 'Confirm your password' },
        dxValidator: {  validationRules: [{ type: 'compare', comparisonTarget: comparisonTarget }] }">
    </div>	
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div style="height:200px;max-width:200px;margin:0px auto" ng-controller="demoController">
    <div ng-model="password" dx-text-box="{ mode: 'password', placeholder: 'Password' }"
         dx-validator="{ validationRules: [{ type: 'required', message: 'Password can not be empty.' }] }">
    </div>
    <div ng-model="confirmedPassword" dx-text-box="{ mode: 'password', placeholder: 'Confirm your password' }"
         dx-validator="{ validationRules: [{ type: 'compare', comparisonTarget: comparisonTarget }] }">
    </div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div style="height:200px;max-width:200px;margin:0px auto">
    <div id="password1"></div>
    <div id="password2"></div>
</div>
<!--/@jQuery-->